<template>
  <a-card>
    <h1>账号安全</h1>
    <hr />
    <br />
    <a-row>
      <a-col :span="7" :offset="1"> <lock-outlined /> 密码 </a-col>
      <a-col :span="7" :offset="1"> 已设置 </a-col>
      <a-col :span="7" :offset="1">
        <div>
          <a-button type="link" @click="visible = true">修改密码</a-button>
          <a-modal
            :closable="false"
            ok-text="确认"
            :maskClosable="false"
            cancel-text="取消"
            v-model:visible="visible"
            title="修改密码"
            @ok="handleOk"
            @cancel="handleNo"
          >
            <a-form
              :model="formState"
              name="password"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 16 }"
              autocomplete="off"
            >
              <a-form-item label="密码" name="Password">
                <a-input-password v-model:value="formState.password" />
              </a-form-item>

              <a-form-item label="确认密码" name="CheckPassword">
                <a-input-password v-model:value="formState.checkPassword" />
              </a-form-item>
            </a-form>
          </a-modal>
        </div>
      </a-col>
      <a-col :span="24"> <br /></a-col>
      <a-col :span="24"> <hr /></a-col>
      <a-col :span="24"> <br /></a-col>
      <a-col :span="7" :offset="1"> <phone-outlined /> 手机 </a-col>
      <a-col :span="7" :offset="1"> 未设置 </a-col>
      <a-col :span="7" :offset="1">
        <a-button type="link">绑定手机</a-button>
      </a-col>
      <a-col :span="24"> <br /></a-col>
      <a-col :span="24"> <hr /></a-col>
      <a-col :span="24"> <br /></a-col>
    </a-row>
  </a-card>
</template>

<script>
import { PhoneOutlined, LockOutlined } from "@ant-design/icons-vue";
import { reactive, ref } from "@vue/reactivity";
import userApi from "@/apis/userApi";
import { useStore } from "vuex";
import router from "@/router/index";
export default {
  name: "SecurityCard",
  components: {
    PhoneOutlined,
    LockOutlined,
  },
  setup() {
    const visible = ref(false);
    const store = useStore();
    const access = store.state.user.info.access;

    let formState = reactive({
      password: "",
      checkPassword: "",
    });
    

    const handleOk = () => {
      userApi.updatePassword(formState, access).then((resp) => {
        if (resp.code === 200) {
          visible.value = false;
          formState.password = "";
          formState.checkPassword = "";
          localStorage.clear();
          store.commit("clear");
          router.push({ name: "login"});
        }
      });
    };

    const handleNo = () => {
      (formState.password = ""), (formState.checkPassword = "");
    };

    return {
      formState,
      visible,
      handleOk,
      handleNo,
    };
  },
};
</script>

<style scoped>
</style>